<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <title>基于 jQuery 的 Ajax 请求</title>
</head>
<body>
<form id="form1">
    学生ID：<input type="text" name="id"><br/>
    学生名称：<input type="text" name="name"><br/>
    学生年龄：<input type="text" name="age"><br/>
    学校：<input type="text" name="school"><br/>
    <button type="button" id="btn1">提交</button>
</form>
<button id="btn" type="button" class="btn btn-primary btn-lg">jQuery Ajax 请求按钮</button>
<table id="tbl1" class="table table-striped">
    <thead>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>学校</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody id="tb2">
    </tbody>
</table>
<!-- 1.11.3版本的 jquery.js , bootstrap.min.js 依赖 jquery.js  -->
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script type="text/javascript">

    $(function () {
        $('#btn1').click(function () {
            console.log($('#form1').serialize());
// var jsonObj = null;
            //按钮被点击时
            $.ajax({
                //指定当前请求为异步请求
                async: true,
                //指定请求路径
                url: './ajax01.do',
                //指定请求方式
                type: 'POST',
                //请求数据
                // data: {
                //     id: $('input[name=id]').val(),
                //     name: $('input[name=name]').val(),
                //     age: $('input[name=age]').val(),
                //     school: $('input[name=school]').val()
                // },
                data: $('#form1').serialize(),
                //指定响应的数据类型
                dataType: 'text',
                success: function (data) {
                    //data:服务器响应的数据
                    console.log("success");
                    console.log(data);
                    var jsonObj = JSON.parse(data);
                    for (var i = 0; i < jsonObj.length; i++) {
                        //给 tbody 回填数据
                        $('#tb2').append('    <tr>\n' +
                            '        <td>' + jsonObj[i].id + '</td>\n' +
                            '        <td>' + jsonObj[i].name + '</td>\n' +
                            '        <td>' + jsonObj[i].age + '</td>\n' +
                            '        <td>' + jsonObj[i].school + '</td>\n' +
                            '        <td>\n' +
                            '            <button class="btn btn-info">修改</button>\n' +
                            '            <button class="btn btn-danger">删除</button>\n' +
                            '        </td>\n' +
                            '    </tr>');
                    }
                },
                error: function (data) {
                    //请求失败调用的函数
                    console.log('error');
                    console.log(data);
                }
            });
        });

        //由于 success 是异步调用，所以这里大概率还未被赋值
        // console.log('jsonObj = ' + jsonObj);
    })
</script>
</body>
</html>